<template>
	<div class="evens">
		<div class="synopsis">
			<subhead label="事件简介"></subhead>
			<div class="content">
				<p style="text-indent:24px;">{{ProfileText}}</p>
			</div>
		</div>
		<div class="evensImg">
			<subhead label="事件图片"></subhead>
			<div class="content">
				<div class="itemImg" v-for="(item,index) in 5" :key="index">
					<div ref="bgImg"></div>
				</div>
			</div>
		</div>
		<div class="trend">
			<subhead label="事件走势"></subhead>
			<div class="content">
				<ul>
					<li v-for="(item,index) in trendLimit" :key="index">
						<div v-for="(i,index1) in item.data" :key="index1">
							<span class="orange day">{{i.poHour | fomartTime}}</span>
							<div class="time start" v-if="index==0">起</div>
							<div class="time end" v-else-if="index==trendLimit.length-1">止</div>
							<div class="time middle" v-else></div>
							<el-button class="more" v-if="index == trendLimit.length-1" @click="openList()">{{isopen}} <i :class="isi"></i></el-button>
							<div v-else class="label">
								<span @click="queryMesage(item)">{{i.title|filterTile}} [{{i.webSite|filterWebSite}}]</span>
								<!--<div >相同文章数:<span class="orange alike" @click="goAlike(item)">{{i.webSiteType}}</span></div>-->
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>
<script >
	import subhead from 'components/common/subhead'	
	export default{
		name:'evens',
		components:{subhead},
		data(){
			return{
				profiles:{},
				images:[],
				trend:[],
				trendLnum:5,
				isopen:'展开事件进展',
				ProfileText:'',
				isi:'el-icon-arrow-down'
			}
		},
		mounted(){
			// this.getProfile(this.thisId)
			this.getprofileText(this.thisId)
			this.getImgurl(this.thisId)
			this.getProfileTrend(this.thisId)
		},
		filters:{
			fomartTime:function(value){
				if (!value) return ''
				value = '' + value 
				let m = parseInt(value.slice(4,6))
				let d = parseInt(value.slice(6,8)) 
				let t = parseInt(value.slice(8,10))
				return '['+m+'月'+d+'日 '+t+'点]'
			},
			filterTile:function(value){
				let v = value.substring(0,20)
				if(value.length>20){
					v+='......'
				}
				return v
			},
			filterWebSite:function(value){
				
				return value.split('-')[0]
			}
		},
		computed:{
			filteLimit:function(){
				return this.images.slice(0,5);
			},
			trendLimit:function(){
				return this.trend.slice(0,this.trendLnum);
			},
			thisId:function(){
				return this.$store.state.Topic.topicId||localStorage.topicId
			}

		},
		methods:{
			getprofileText(id){
				this.$http.post('vrv-monitor-platform-web/topic/read/getProfileText',{
					id:id
				}).then(res=>{
					this.ProfileText = res.body.data
				})
			},
			getImgurl(id){
				this.$http.post('vrv-monitor-platform-web/topic/read/getProfileImgUrl',{
					id:id
				}).then(async function(res){
					let out = await Promise.all(res.body.data.split(';'||',').map(d => this.getMeta(d)))
					out = out.filter(d => d.w)
					let arr = []
					for(let i=0;i<out.length;i++){
						if(out[i].w>250&&out[i].h>150){
							arr.push(out[i])
							if(arr.length>5){
								break;
							}
						}
					}
					let obj={
						url: require('./img/loading.png')
					}
					for(let i = arr.length;i<5;i++){
						arr.push(obj)
					}
					this.images = arr
					this.$refs.bgImg.map((d,i)=>{
						d.style.backgroundImage="url("+this.images[i].url+")"
						d.style.backgroundSize="cover"
					})
				})
			},
			getProfileTrend:function(id){
			  	this.$http.post('vrv-monitor-platform-web/topic/read/getProfileTrend',{
			  		id:id
			  	}).then((res)=>{
			  		if (res.body.success==true) {
			  			this.trend = res.body.data
			  		};
			  	})
			},
			openList(){
				if(this.trendLnum==5){
						this.trendLnum = this.trend.length
						this.isopen = '合并事件进展'
						this.isi = 'el-icon-arrow-up'
				}else{
					this.trendLnum = 5
					this.isopen = '展开事件进展'
					this.isi = 'el-icon-arrow-down'
				}
				
		  },
			goAlike(item){
		
			},
			getMeta(url){
				var w; var h;
				var img=new Image;
				img.src=url;
				return new Promise(r => {
					img.onload=function(){
						w=this.width; h=this.height;
						r({w:w,h:h,url:url})
					}
					img.onerror = r
				})
			},
			queryMesage(item){
				let flag = typeof(item.title)!='undefined'
		    let id = flag?item.id:item.data[0].id
				let pirnt = item.data[0].titleContentPrint
				console.log(item)
				this.$store.dispatch('queryarticle',{
		        id:id,
						titleContentPrint:pirnt,
		      });
			}
		}
	}
</script>
<style scoped> 
	.evens{
		padding: 0 1.8rem;
	}
	.evens .content{
		padding: 1.125rem 1.43rem;
	}
	.evens .content p{
		margin: 0;
		color: #626262;
		font-size: 0.88rem;
		line-height: 1.25rem;
	}
	.evensImg .content{
		display: flex;
		justify-content: space-between;
	}
	.itemImg{
		flex:1;
		height: 9.6rem;
		padding: 5px 15px;
	}
	.itemImg div{
		display: block;
		margin: 0 auto;
		height: 100%;
		background: url(img/gif.gif) no-repeat;
		background-size: contain;
		background-position: center;
	}
	.trend ul{
		padding: 0;
		position: relative;
		
	}
	 .day{
		display: inline-block;
		width: 7rem;
		font-size:0.88rem;
	}
	.alike{
		display: inline-block;
		padding: 0 3px;
	}
	.trend ul:after{
		content: "";
	    position: absolute;
	    top: 0;
	    left: 8.875rem;
	    bottom: 2rem;
	    width: 1px;
	    border-left: 1px dashed #aaa;
	}
	.trend ul li{
		list-style: none;
		height: 4.375rem;
		font-size: 0;
	}
	.trend ul li >span{
		margin-right: 3rem;
	}
	.trend ul li .time{
		display: inline-block;
		width: 1rem;
		height: 1rem;
		border: 1px solid #22b7e9;
		border-radius: 50%;
		vertical-align: top;
		position: relative;
		z-index: 9;
	}
	.trend ul li .start{
		width: 3.75rem;
		height: 3.75rem;
		border-radius: 50%;
		background: #22b7e9;
		line-height: 3.75rem;
		color: #fff;
		text-align: center;
		font-size: 1.5rem;
		margin-right: 1.875rem;
		box-sizing: border-box;

	}
	.trend ul li .middle{
		margin-left: 1.375rem;
		background: #fff;
		box-sizing: border-box;
		margin-right: 3.25rem;
		margin-top: 1.68rem;
	}
	.trend ul li .end{
		margin-top: 0.72rem;
		width: 2.75rem;
		height: 2.75rem;
		margin-left: 0.43rem;
		background: #22b7e9;
		text-align: center;
		line-height: 2.75rem;
		margin-right: 2.3rem;
		color: #fff;
		font-size: 1.5rem;
		box-sizing: border-box;
	}
	.trend ul li .label{
		position: relative;
		display: inline-block;
		width: 37.5rem;
		font-size: 0.88rem;
		color: #313131;
		background: #eeeeee;
		border-radius: 0.625rem;
		padding: 0 1.875rem;
		height: 3.125rem;
		margin-top: 0.3125rem;
		line-height: 3.125rem;
		letter-spacing: 1px;
		
	}
	.trend ul li .label span{
		white-space:nowrap; 
		cursor: pointer;
	}
	.trend ul li .label:after{
	    content: "";
	    position: absolute;
	    left: -0.625rem;
	    top: 1.25rem;
	    width: 0;
	    height: 0;
	    border-top: 0.43rem solid transparent;
	    border-right: 0.88rem solid #eeeeee;
	    border-bottom: 0.43rem solid transparent;
	}
	.trend ul li .label div{
		display: inline-block;
		margin-left: 0.93rem;
		white-space:nowrap; 

	}
	.trend ul li .orange{
		color: #ec6941;
	}
	.more{
		font-size: 0.88rem;
		margin-top: 1rem;
	}
	.view-content{
		display: flex;
		margin: 0.625rem 0;
		height: 30.625rem;
	}
	.view-content .viewImg{
		flex:1;
		background: #678be8;
	}
	.view-content .viewList{
		flex:0 0 14.1rem;
		width: 14.1rem;
		background: #eee;
	}
	.view-content .viewList .title{
		height: 2.5rem;
		line-height: 2.5rem;
		background: #dcdcdc;
		padding-left: 25px;
		font-size: 14px;
		color: #000;
		font-weight: bold;
	}
	.view-content .viewList .item{
		margin-right: 15px;
		padding-left: 1.6rem;
		font-size: 0.88rem;
		color: #313131;
		line-height: 2.5rem;
		height: 2.5rem;
		border-bottom: 1px solid #dcdcdc;
	}
	.spread .content{
		background: #dcdcdc;
		height: 28rem;
	}
	.desc .content{
		font-size: 0.88rem;
		color: #313131;
	}
	/*@media screen and (max-width: 1600px){
				.trend ul li .label{
					width:48rem
				}
	} 
	@media screen and (max-width: 1350px){
				.trend ul li .label{
					width:37rem
				}
	} */

</style>